<template>
  <div id="workPage">
    <div id="btns">
      <el-popover
        placement="top-start"
        width="200"
        trigger="hover"
      >
        <vue-editor
          v-model="helpArrays.CONFIG_FUNCTION"
          :disabled="true"
          :editor-toolbar="customToolbar"
        />
        <i
          slot="reference"
          class="el-icon-question"
          style="color:#409eff;margin-top:10px;margin-left:5px;font-size:30px;"
        />
      </el-popover>
      <el-button @click="emptys()">清空</el-button>
      <el-button @click="addpush()">提交</el-button>
    </div>
    <div id="pagebody">
      <el-col>
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
        >
          <el-menu-item
            v-for="(item,index) in menu.menus"
            :key="index"
            :index="index+''"
          >
            <el-popover
              trigger="hover"
              placement="left"
            >
              <span
                slot="reference"
                class="spans"
                @click="menuTabs(item.tableName)"
              >
                {{ item.tableName }}
              </span>
              {{ item.tableName }}
            </el-popover>
            <i
              class="el-icon-delete"
              @click="empty(item.tableName)"
            />
          </el-menu-item>

        </el-menu>

      </el-col>
      <div id="deployBottom">
        <div id="deployBottom">
          <el-tabs
            v-model="activeName"
            type="card"
          >
            <el-tab-pane
              label="属性映射"
              name="first"
            >
              <el-table
                :data="tableData.fieldViews"
                border=""
              >
                <el-table-column
                  :row-class-name="tableRowClassName"
                  prop="columnName"
                  label="列名"
                  width="150"
                />
                <el-table-column
                  prop="columnDesc"
                  label="列备注"
                  width="150"
                />
                <el-table-column
                  prop="columnType"
                  label="列类型"
                  width="150"
                />
                <el-table-column
                  label="属性类型"
                  width="150"
                >
                  <template slot-scope="one">

                    <el-select
                      v-model="one.row.fieldType"
                      placeholder="请选择"
                      width="150"
                    >
                      <el-option
                        v-for="item in javaTypes"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="属性名"
                  width="150"
                >
                  <template slot-scope="one">
                    <el-input v-model="one.row.fieldName"/>
                  </template>
                </el-table-column>
                <el-table-column
                  label="格式化"
                  width="150"
                >
                  <template slot-scope="one">
                    <el-select
                      v-model="one.row.formatType"
                      placeholder="请选择"
                      width="150"
                    >
                      <el-option
                        v-for="(items,index) in formatters"
                        :key="index"
                        :label="items.desc"
                        :value="items.name"
                      />
                    </el-select>

                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="表单映射"
              name="second"
            >
              <el-table
                ref="dragTable"
                :data="tableData.formViews"
                :cell-style="{'vertical-align':'top'}"
                border
                fit
                highlight-current-row
                row-key="id"
              >
                <el-table-column
                  prop="columnName"
                  label="列名"
                  width="150"
                />
                <el-table-column
                  prop="columnDesc"
                  label="列备注"
                  width="150"
                />
                <el-table-column
                  prop="columnType"
                  label="列类型"
                  width="150"
                />
                <el-table-column
                  label="验证类型"
                  width="400"
                >
                  <template slot-scope="one">
                    <div class="btn">
                      <i
                        class="el-icon-circle-plus"
                        @click="append(one.row,one.$index)"
                      />
                    </div>
                    <div class="inpshow">
                      <div
                        v-for="(item,index) in one.row.validations"
                        :key="index"
                        style="width:300px;height:24px"
                      >
                        <div class="btn">
                          <i
                            class="el-icon-circle-close"
                            @click="deletes(one.row,index)"
                          />
                        </div>
                        <el-select
                          :key="index"
                          v-model="item.type"
                          placeholder="请选择"
                          width="150"
                          @change="changeVal(item.type,one.row.id,one.row,index)"
                        >
                          <el-option
                            v-for="(item) in options"
                            :key="item.desc"
                            :label="item.desc"
                            :value="item.name"
                          />
                        </el-select>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="参考值"
                          placement="top-start"
                        >
                          <el-input
                            v-show="item.hasValued"
                            v-model="item.value"
                          />
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="提示文字"
                          placement="top-start"
                        >
                          <el-input
                            v-model="item.message"
                            class="inpmess"
                          />
                        </el-tooltip>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="控件类型"
                  width="130px"
                >
                  <template slot-scope="one">
                    <el-select
                      v-model="one.row.control.type"
                      placeholder="请选择"
                      width="150"
                      @change="typeVal(one.row.control.type,one.row)"
                    >
                      <el-option
                        v-for="(item,index) in types"
                        :key="index"
                        :label="item.desc"
                        :value="item.type"
                      />
                    </el-select>
                    <el-select
                      v-show="one.row.relationTypes"
                      v-model="one.row.relationType"
                      @change="typeVals(one.row.relationType,one.row)"
                    >
                      <el-option
                        v-for="(item,index) in relationType"
                        :key="index"
                        :value="item.type"
                        :label="item.type"
                      />
                    </el-select>
                    <el-select
                      v-show="one.row.selectedes"
                      v-model="one.row.selecteds"
                      @change="typeVales(one.row.selected,one.row.selecteds,one.row)"
                    >
                      <el-option
                        v-for="(item,index) in one.row.selected"
                        :key="index"
                        :value="item.desc"
                        :label="item.desc"
                      />
                    </el-select>
                    <el-select
                      v-show="one.row.selectedess"
                      v-model="one.row.item"
                      @change="typeValesdd()"
                    >
                      <el-option
                        v-for="(item,index) in one.row.items"
                        :key="index"
                        :value="item"
                        :label="item"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  label="控件显示"
                  width="80"
                >
                  <template slot-scope="one">
                    <el-checkbox v-model="one.row.renderType"/>
                  </template>
                </el-table-column>
                <el-table-column
                  label="lable"
                  width="150"
                >
                  <template slot-scope="one">
                    <el-input v-model="one.row.lable"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="列表映射"
              name="third"
            >
              <el-table
                ref="multipleTable"
                :data="tableData.listViews"
                :row-class-name="tableListClassName"
                border
                row-key="id"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  prop="formTableName"
                  label="引用表名"
                  width="150"
                />
                <el-table-column
                  prop="columnName"
                  label="列名"
                  width="150"
                />
                <el-table-column
                  prop="columnDesc"
                  label="列备注"
                  width="150"
                />
                <el-table-column
                  prop="columnType"
                  label="列类型"
                  width="150"
                />
                <el-table-column
                  label="标题名"
                  width="150"
                >
                  <template slot-scope="one">
                    <el-input v-model="one.row.title"/>
                  </template>
                </el-table-column>
                <el-table-column
                  label="列表展示"
                  width="80"
                >
                  <template slot-scope="one">

                    <el-checkbox
                      v-model="one.row.renderType"
                      @change="listshow(one.row.renderType)"
                    />
                  </template>
                </el-table-column>

                <!-- <el-table-column
                  label="格式化"
                  width="150"
                >
                  <template slot-scope="one">
                    <el-select
                      v-model="one.row.formatType"
                      placeholder="请选择"
                      width="150"
                    >
                      <el-option
                        v-for="(items,index) in formatters"
                        :key="index"
                        :label="items.desc"
                        :value="items.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column> -->
                <el-table-column
                  label="条件显示"
                  width="150"
                >
                  <template slot-scope="one">
                    <el-checkbox
                      v-model="one.row.conditionRenderType"
                      style="float:left;margin-right:10px;"
                      @change="conditions(one.row.conditionRenderType)"
                    />
                    <el-select
                      v-show="one.row.conditionRenderType"
                      v-model="one.row.conditionType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item,index) in conditionTypes"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
#workPage .modal-backdrop {
  opacity: 0 !important;
  filter: alpha(opacity=0) !important;
}
#workPage .alicen {
  text-align: center;
}
#workPage .el-menu {
  z-index: 20;
}
#workPage .el-icon-circle-close {
  float: left;
}
#workPage .setTbale {
  margin-left: 60%;
}
#workPage .cell {
  text-overflow: ellipsis;
  white-space: nowrap;
}
#workPage .inp {
  float: left;
}
#workPage .inpName {
  float: left;
  height: 26px;
  line-height: 26px;
}
#workPage .inpName .el-input {
  width: 150px;
}
#workPage .el-input {
  margin-top: 1px;
  width: 100px;
}
#workPage .el-input__inner {
  padding: 0 5px;
}
#workPage .el-menu-item {
  height: 28px;
  line-height: 28px;
  border-top: 1px solid #ccc;
  padding: 0;
}
#workPage .el-select {
  float: left;
  width: 100px;
}
#workPage .btn {
  cursor: pointer;
  color: cadetblue;
  float: left;
  height: 23px;
  line-height: 23px;
  margin-right: 5px;
}
#workPage .el-menu-item .spans {
  display: inline-block;
  width: 80%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#workPage .el-tabs__header {
  margin-top: 5px;
  margin-bottom: 10px;
}
#workPage .el-tab-pane .el-table {
  margin-top: 0px;
}
#workPage .el-tabs {
  margin-left: 290px;
}
#workPage .el-table {
  float: left;
  margin-top: 42px;
}
#workPage .el-col {
  width: 280px;
  /*height: 100vh;*/
  border-right: 1px solid #623f18;
  background: #fff;
  min-width: 150px;
  z-index: 20;
}
#workPage #deploy {
  width: 100%;
  height: auto;
}
#workPage #deploy #deployBottom {
  position: relative;
  width: 100%;
}
#workPage #deploy #deployBottom #addpush {
  background: #623f18;
  color: #fff;
  z-index: 20;
  position: absolute;
  right: 10px;
  top: -2px;
}
#workPage #deploy #deployBottom .el-tabs__nav {
  margin-left: 20px;
}
#workPage .el-carousel__item {
  overflow: auto;
}
#workPage .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

#workPage .el-carousel__container {
  height: 190px !important;
}
#workPage .pages {
  width: 330px;
  height: 50px;
  margin-top: 10px;
  font-size: 12px;
  float: left;
}

#workPage .pages div {
  margin-left: 20px;
}
#workPage .pages .pagesLabel {
  font-weight: bold;
  color: #409eff;
}
#workPage .pages .pagesBody {
  margin-top: 1px;
  font-size: 15px;
}
#workPage .pagetit {
  font-size: 20px;
  margin: 10px;
}
#workPage .pagetit .el-button {
  background: #623f18;
  color: #fff;
}
#workPage .el-carousel__indicator {
  display: none;
}
#workPage .inpshow {
  margin-left: 20px;
}
#workPage .inpmess {
  width: 130px;
}
#workPage #btns {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #623f18;
}
#workPage #btns button {
  float: right;
  margin: 4px;
  background: #623f18;
  color: #fff;
}
#workPage #pagebody {
  margin-top: -5px;
}
#workPage #pagebody i {
  line-height: 27px;
  float: right;
}
#workPage .el-table .success-row {
  background: #f3aa0c;
}
</style>
<script>
import {
  fsMenu,
  fsColsFields,
  fsColsFieldsSave,
  relationVals,
  clearAll,
  clear,
  docwindow
} from '@/api/page'
import {
  gconfigBasic,
  gconfigModel,
  gconfigController,
  gconfigDao,
  gconfigService,
  gconfigView,
  dataSelected
} from '@/api/page'
import { VueEditor } from 'vue2-editor'
import Sortable from 'sortablejs'

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      arr: [],
      customToolbar: [],
      helpArrays: [],
      checked: [],
      sortable: null,
      pid: '',
      data: {
        pid: ''
      },
      fields: {
        pid: '',
        tableName: ''
      },
      relationView: [],
      checbox: [],
      listdb: [],
      listmodel: [],
      listcontroller: [],
      listdao: [],
      listservice: [],
      listview: [],
      activeName: 'first',
      tableData: [],
      options: [],
      types: [],
      menu: [],
      saveTable: {
        pid: '',
        excludes: []
      },
      excludes: [],
      // 三级列表
      vals: [],
      // 属性映射
      javaTypes: [],
      // 是否显示
      multipleSelection: [],
      oldList: [],
      oldList1: [],
      conditionTypes: [],
      formatters: [],
      relationValues: [],
      // 选择控件数据类型级联数据
      relationType: [
        {
          type: 'ENUM'
        },
        {
          type: 'DBRELATION'
        }
      ]
    }
  },
  computed: {},
  mounted() {
    this.data.pid = localStorage.getItem('pid')
    this.fields.pid = localStorage.getItem('pid')
    fsMenu(this.data)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.menu = response.data.data
          this.excludes = response.data.data.excludes
          this.javaTypes = response.data.data.javaTypes
          this.types = response.data.data.formControllers
          this.options = response.data.data.formValidations
          this.conditionTypes = response.data.data.conditionTypes
          this.formatters = response.data.data.formatters
          this.menuTabs(this.menu.menus[0].tableName)
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
        this.$router.push('/admin')
      })
    this.arr = ['CONFIG_FUNCTION']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == 1) {
        return 'asd'
      }
    },
    tableListClassName({ row, rowIndex }) {
      if (row.fieldRelation == 'OTHER') {
        return 'success-row'
      }
    },
    changes(a, b, c) {
      if (a == false) {
        this.saveTable.excludes.push(b)
      } else {
        for (var i = 0; i < this.saveTable.excludes.length; i++) {
          if (this.saveTable.excludes[i] == b) {
            this.saveTable.excludes.splice(i, 1)
          }
        }
      }
    },
    menuTabs(a) {
      this.relationValues = []
      this.fields.tableName = a

      fsColsFields(this.fields)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.relationValues.push(response.data.data.relationValues)
            this.tableData = response.data.data

            // 回显
            var key = ''
            for (var i = 0; i < this.tableData.formViews.length; i++) {
              // console.log(this.tableData.formViews[i])
              if (this.tableData.formViews[i].control.dataType != undefined && this.tableData.formViews[i].control.dataType != '') {
                this.$forceUpdate()
                this.tableData.formViews[i].relationTypes = true
                // console.log(this.tableData.formViews[i].relationTypes)
                this.tableData.formViews[i].relationType = this.tableData.formViews[i].control.dataType
              }
              if (this.tableData.formViews[i].control.desc != undefined && this.tableData.formViews[i].control.desc != '') {
                this.$forceUpdate()
                this.tableData.formViews[i].selectedes = true
                // console.log(this.tableData.formViews[i].control.desc,141414)
                this.tableData.formViews[i].selecteds = this.tableData.formViews[i].control.desc
              }
              if (this.tableData.formViews[i].control.varName != undefined && this.tableData.formViews[i].control.varName != '') {
                this.$forceUpdate()
                // console.log(this.tableData.formViews[i].control.dataType)
                if (this.tableData.formViews[i].control.dataType == 'ENUM') {
                  this.tableData.formViews[i].selectedess = false
                  this.tableData.formViews[i].item = this.tableData.formViews[i].control.varName
                } else {
                  this.tableData.formViews[i].selectedess = true
                  this.tableData.formViews[i].item = this.tableData.formViews[i].control.varName
                }
              }
            }
            for (var i = 0; i < this.tableData.formViews.length; i++) {
              for (key in this.types) {
                if (
                  this.types[key].name ==
                  this.tableData.formViews[i].control.type
                ) {
                  if (this.types[key].relationView != undefined) {
                    this.tableData.formViews[i].relationView = []
                    this.tableData.formViews[i].relationView.push(
                      this.types[key].relationView
                    )
                  }
                }
                for (key in this.relationValues[0]) {
                  if (key == this.tableData.formViews[i].control.relationType) {
                    this.tableData.formViews[i].relationValues = []
                    this.tableData.formViews[i].relationValues2 = []
                    this.tableData.formViews[i].relationValues.push(
                      this.relationValues[0][key]
                    )

                    for (
                      var j = 0;
                      j < this.tableData.formViews[i].relationValues[0].length;
                      j++
                    ) {
                      if (
                        this.tableData.formViews[i].control.subjoinValue ==
                        this.tableData.formViews[i].relationValues[0][j].key
                      ) {
                        this.tableData.formViews[i].relationValues2.push(
                          this.tableData.formViews[i].relationValues[0][j]
                            .values
                        )
                      }
                    }
                  }
                }
              }
            }

            this.$nextTick(() => {
              this.setSort()
            })
            for (var j = 0; j < this.tableData.listViews.length; j++) {
              if (this.tableData.listViews[j].renderType == 'VIEW') {
                this.tableData.listViews[j].renderType = true
              } else {
                this.tableData.listViews[j].renderType = false
              }
              if (this.tableData.listViews[j].conditionRenderType == 'VIEW') {
                this.tableData.listViews[j].conditionRenderType = true
              } else {
                this.tableData.listViews[j].conditionRenderType = false
              }
            }
            for (var j = 0; j < this.tableData.formViews.length; j++) {
              if (this.tableData.formViews[j].renderType == 'VIEW') {
                this.tableData.formViews[j].renderType = true
              } else {
                this.tableData.formViews[j].renderType = false
              }
            }
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    append(a, b) {
      // console.log(a)
      // console.log(b)
      for (var i = 0; i < a.validations.length; i++) {
        if (a.validations[i].message == '') {
          return false
        }
      }

      var rules = { type: '', message: '', value: '', hasValued: false }
      a.validations.push(rules)
    },
    deletes(a, b) {
      console.log(b)
      a.validations.splice(b, 1)
    },
    compare(property) {
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    addpush() {
      this.$forceUpdate()
      var addpush = {
        pid: this.data.pid,
        tableName: this.fields.tableName,
        fieldViews: [],
        listViews: [],
        formViews: []
      }

      for (var i = 0; i < this.tableData.fieldViews.length; i++) {
        var field = new Object()
        field.fieldName = this.tableData.fieldViews[i].fieldName
        field.fieldType = this.tableData.fieldViews[i].fieldType

        if (this.tableData.fieldViews[i].formatType == undefined) {
          field.formatType = ''
        } else {
          field.formatType = this.tableData.fieldViews[i].formatType
        }
        if (this.tableData.fieldViews[i].columnDefaultValue == undefined) {
          field.columnDefaultValue = null
        } else {
          field.columnDefaultValue = this.tableData.fieldViews[
            i
          ].columnDefaultValue
        }

        field.id = this.tableData.fieldViews[i].id
        addpush.fieldViews.push(field)
      }

      for (var i = 0; i < this.tableData.listViews.length; i++) {
        var list = new Object()
        list.formatType = this.oldList1[i].formatType
        list.id = this.oldList1[i].id
        list.orderSeria = i
        list.title = this.oldList1[i].title
        if (this.oldList1[i].renderType == true) {
          list.renderType = 'VIEW'
        } else {
          list.renderType = 'HIDDEN'
        }
        if (this.oldList1[i].conditionRenderType == true) {
          list.conditionRenderType = 'VIEW'
          list.conditionType = this.oldList1[i].conditionType
        } else {
          list.conditionRenderType = 'HIDDEN'
          list.conditionType = null
        }

        addpush.listViews.push(list)
      }

      for (var i = 0; i < this.tableData.formViews.length; i++) {
        // console.log(this.oldList[i])
        var form = new Object()
        form.id = this.oldList[i].id
        form.lable = this.oldList[i].lable
        form.formatType = this.oldList[i].formatType
        form.orderSeria = i
        for (var k = 0; k < this.oldList[i].validations.length; k++) {
          if (this.oldList[i].validations[k].type == '') {
            this.$message.error('请选择验证类型！！！')
            return false
          }
        }
        form.validations = this.oldList[i].validations
        form.control = {}
        form.control.type = this.oldList[i].control.type
        if (this.oldList[i].control.type != 'SELECTED') {
          form.control.desc = ''
          this.oldList[i].control.desc = ''
        }
        // console.log(this.oldList[i].control.type)
        // console.log(this.oldList[i])
        if (this.oldList[i].selected != undefined) {
          this.oldList[i].selected.forEach(function(v) {
            form.control.dataId = v.dataId
          })
        } else {
          if (this.oldList[i].control.dataId != undefined) {
            form.control.dataId = this.oldList[i].control.dataId
          } else {
            form.control.dataId = ''
          }
        }

        if (this.oldList[i].relationType != undefined) {
          form.control.dataType = this.oldList[i].relationType
        }

        if (this.oldList[i].item != undefined) {
          form.control.varName = this.oldList[i].item
        }
        // console.log(this.tableData.formViews[i])
        if (this.oldList[i].selected != undefined) {
          this.oldList[i].selected.forEach(function(s) {
            form.control.desc = s.desc
            // console.log(s.desc)
          })
        } else {
          if (this.oldList[i].control.desc != undefined) {
            form.control.desc = this.oldList[i].control.desc
          } else {
            form.control.desc = ''
          }
        }

        if (this.oldList[i].renderType == true) {
          form.renderType = 'VIEW'
        } else {
          form.renderType = 'NONE'
        }
        addpush.formViews.push(form)
        // console.log(form,999)
      }
      // console.log(this.tableData.formViews,11111)
      this.openFullScreen()
      this.$confirm('是否提交数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          fsColsFieldsSave(addpush)
            .then(response => {
              if (response.data.code == 'SUCCESS') {
                setTimeout(() => {
                  this.loading.close()
                }, 1000)
              } else {
                alert(response.data.message)
              }
            })
            .catch(error => {
              alert(error.response.data.message)
            })
        })
        .catch(() => {
          this.loading.close()
        })
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
    },
    setSort() {
      var that = this
      that.oldList = this.tableData.formViews.map(v => v)

      that.oldList1 = this.tableData.listViews.map(v => v)

      const el = this.$refs.dragTable.$el.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      that.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = that.oldList.splice(evt.oldIndex, 1)[0]
          console.log(targetRow)
          that.oldList.splice(evt.newIndex, 0, targetRow)
          console.log(that.oldList)
        }
      })

      const els = this.$refs.multipleTable.$el.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      this.sortable = Sortable.create(els, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onUpdate: evt => {
          const targetRow = that.oldList1.splice(evt.oldIndex, 1)[0]
          that.oldList1.splice(evt.newIndex, 0, targetRow)
        }
      })
    },
    changeVal(a, b, c, d) {
      var isNum = 0
      console.log(a)
      console.log(b)
      console.log(c)
      console.log(d, 111111)
      for (var s = 0; s < c.validations.length; s++) {
        if (a == c.validations[s].type) {
          isNum++
        }
      }
      if (isNum == 2) {
        this.$message.error('选择重复哦！')
        c.validations[d].type = ''
        c.validations[d].message = ''
        c.validations[d].hasValued = false
        c.validations[d].value = ''
      } else {
        // for (var i = 0; i < this.options.length; i++) {
        //   //缺少重复添加判断
        //   console.log(this.options[i].name == a)
        //   if (this.options[i].name == a) {
        //     console.log(c.validations[i])
        //     console.log(i)
        //     c.validations[i].hasValued = JSON.parse(
        //       this.options[i].code
        //     ).hasValued;
        //     c.validations[i].message = JSON.parse(this.options[i].code).message;
        //     c.validations[i].valued = JSON.parse(this.options[i].code).value;
        //   }
        // }
        for (var i = 0; i < this.options.length; i++) {
          for (var j = 0; j < c.validations.length; j++) {
            // console.log(this.options[i].name,1)
            // console.log(c.validations[j].type,2)
            if (c.validations[j].type == this.options[i].name) {
              c.validations[j].hasValued = JSON.parse(
                this.options[i].code
              ).hasValued
              c.validations[j].message = JSON.parse(this.options[i].code).message
              c.validations[j].value = JSON.parse(this.options[i].code).value
            }
          }
        }
      }
    },
    typeVal(a, b) {
      /* 一级 one.row.control.type,one.row*/
      console.log(b)
      for (var i = 0; i < this.types.length; i++) {
        if (this.types[i].type == a) {
          if (this.types[i].sourceType == 'MutipleValued') {
            b.relationTypes = true
            b.selectedes = false
            b.selectedess = false
          } else {
            b.relationTypes = false
            b.relationType = null
            b.selectedes = false
            b.selecteds = null
            b.selectedess = false
            b.item = null
          }
        }
      }
    },
    typeVals(a, b) {
      /* 二级 one.row.relationType,one.row*/
      console.log(a, 'a')
      console.log(b, 'b')
      var data = {}
      data.pid = localStorage.getItem('pid')
      data.relationType = a
      data.tableName = b.tableName
      data.columnName = b.columnName
      b.selectedes = true
      b.selectedess = false

      dataSelected(data)
        .then(response => {
          this.$forceUpdate()
          b.selected = response.data.data
          if (b.selecteds != undefined) {
            b.selecteds = null
            b.item = null
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    typeVales(a, b, c) {
      /* 三级 one.row.selected,one.row.selecteds,one.row*/
      console.log(a, 'typeVales')
      console.log(b, 'typeVales')
      console.log(c, 'typeVales')
      this.$forceUpdate()

      for (var i = 0; i < a.length; i++) {
        if ((a[i].desc = b)) {
          // console.log(a[i].items.length,14)
          this.$forceUpdate()
          console.log(a[i], 123)
          if (a[i].items.length < 1) {
            c.selectedess = false
            c.item = a[i].items[0]
            console.log(a[i], 1230)
            // console.log(c.control)
            // console.log(c.control.varName = a[i].items[0])
          } else {
            c.selectedess = true
            c.items = a[i].items
            console.log(c.items, 1234)
          }
          // console.log(c);
        }
      }
    },
    typeValesdd() {
      this.$forceUpdate()
    },
    // typeVal(a, b) {
    //   var key = "";
    //   this.relationView = [];
    //   b.relationView = this.relationView;
    //   b.relationValues = [];
    //   b.relationValues2 = [];i
    //   for (key in this.types) {
    //     if (this.types[key].name == a) {
    //       if (this.types[key].relationView != undefined) {
    //         b.relationView.push(this.types[key].relationView);
    //       } else {
    //         b.control.relationType = "";
    //       }
    //     }
    //   }
    // },
    // typeVals(a, b) {
    //   var key = "";
    //   b.relationValues = [];
    //   b.relationValues2 = [];
    //   b.control.subjoinValue = "";
    //   for (key in this.relationValues[0]) {
    //     if (key == a) {
    //       b.relationValues.push(this.relationValues[0][key]);
    //     }
    //   }
    //   if (JSON.stringify(b.relationValues[0]) == "{}") {
    //     alert("没有数据关系");
    //     b.relationValues = [];
    //   }
    // },
    // typeVales(a, b, c) {
    //   var key = "";
    //   b.relationValues2 = [];
    //   b.control.subjoinValue2 = "";
    //   for (key in this.relationValues[0]) {
    //     if (key == a) {
    //       for (var i = 0; i < this.relationValues[0][key].length; i++) {
    //         if (c == this.relationValues[0][key][i].key) {
    //           b.relationValues2.push(this.relationValues[0][key][i].values);
    //         }
    //       }
    //     }
    //   }
    // },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    listshow(a) {},
    conditions(a) {
      if (a == true) {
        this.conditionTypesshow = true
      } else {
        this.conditionTypesshow = false
      }
    },
    emptys() {
      this.openFullScreen()

      this.$confirm('此操作将会清空全部数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var obj = {
            pid: this.data.pid
          }
          clearAll(obj)
            .then(response => {
              if (response.data.code == 'SUCCESS') {
                setTimeout(() => {
                  this.loading.close()
                }, 1000)
              } else {
                alert(response.data.message)
              }
            })
            .catch(error => {
              alert(error.response.data.message)
            })
        })
        .catch(() => {
          this.loading.close()
        })
    },
    empty(a) {
      this.openFullScreen()

      this.$confirm('此操作将对此表初始化', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var obj = {
            pid: this.data.pid,
            tableName: a
          }
          clear(obj)
            .then(response => {
              if (response.data.code == 'SUCCESS') {
                setTimeout(() => {
                  this.loading.close()
                }, 1000)
                this.menuTabs(a)
              } else {
                alert(response.data.message)
              }
            })
            .catch(error => {
              alert(error.response.data.message)
            })
        })
        .catch(() => {
          this.loading.close()
        })
    }
  }
}
</script>
